    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hint style-1</title>
    <link rel="stylesheet" href="../../model/jsFn.css">
    <link rel="stylesheet" href="../../model/element.css">
</head>
<body>
<!--目录-->
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p><a href="#element">< hint style="1" ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_get">get ----------得到文本内容</a></p></li>
                <li><p><a href="#jsFn_set">set ----------设置文本内容</a></p></li>
                <li><p><a href="#jsFn_display">display ----------是否显示全部文本</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li><p><a href="#childElement_p">p</a></p></li>
                <li><p><a href="#childElement_img">img</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<!--标签-->
<div id="element">
    <h2>hint style1 </h2>
    <div>简介:</div>
    <p>包裹内容的文本</p>
</div>
<!--属性-->
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <!--xmp标签可以直接书写xml格式文本-->
        <xmp>
            <hint margin="13,2,13,0">
                <p font="12,#7b7b7b" spacing="1.2">3.填写前请准备好这3类资料：法人代表身份证复印件、工商营业执照复印件、组织机构代码证书复印件（以上资料请加盖企业原章并由负责人签字）</p>
            </hint>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table >
            <tbody>
                <tr>
                    <th>属性</th>
                    <th>值</th>
                    <th>描述</th>
                </tr>
                <tr>
                    <td>indent</td>
                    <td>4</td>
                    <td>首行缩进4个字</td>
                </tr>

            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
        <p>无</p>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <img src="img/hint.png" alt="">
    </div>
</div>
<!--js方法-->
<div id="jsFn">
    <h2>js方法</h2>
    <div id="jsFn_get" class="jsFnModel">
        <h3>get:</h3>
        <div class="shape">
            <h3>函数使用样式:</h3>
            <p>hint.get('elementName') ->string</p>
        </div>
        <div class="profile">
            <h3>函数功能简介:</h3>
            <p>获得hint标签下指定p子标签的文本</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>elementName</p>
                    <p>&nbsp;string&nbsp;</p>
                    <p>子标签名</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值</h3>
            <p>类型:string</p>
            <p>返回指定标签展示的文本信息</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
                <code>
                    < hint id="hint1">
                        < p >左边文字< /p >
                    < /hint >
                    let lpText = document.$('hint1').get('p');
                    console.log('p',lpText);
                    //控制台打印  lp:左边文字;
                </code>
            </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div id="jsFn_set" class="jsFnModel">
        <h3>set:</h3>
        <div class="shape">
            <h3>函数使用样式:</h3>
            <p>hint.set(object) ->null </p>
        </div>
        <div class="profile">
            <h3>函数功能简介:</h3>
            <p>设置hint标签下指定p子标签的文本</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>object</p>
                    <p>&nbsp;object&nbsp;</p>
                    <p>key 为指定标签，value为标签内容</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值</h3>
            <p>hint</p>
            <p>返回hint本身</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
                <code>
                    < hint id="hint1">
                        < p >左边文字< /p >
                    < /hint >
                     document.$('hint1').set({p:{font:'14,#ff6c6c',p:'你好'});
                    //文字改为 你好，字体颜色也改变

                </code>
            </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div id="jsFn_display" class="jsFnModel">
        <h3>display:</h3>
        <div class="shape">
            <h3>函数使用样式:</h3>
            <p>hint.display(boolean) ->null </p>
        </div>
        <div class="profile">
            <h3>函数功能简介:</h3>
            <p>设置hint标签显示状态，全部显示还是部分显示</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <ul>
                <li>
                    <p>boolean</p>
                    <p>true|false</p>
                    <p>true:全部展示,false:部分显示</p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值</h3>
            <p>hint</p>
            <p>返回hint本身</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
                <code>
        < hint background="#ffffff" click="document.$('hint').change()" id="hint"
                padding="14,10,14,10">
            < hintimg attr="14,8" imgdown="img.drop_down.png" index="3">img.drop_up.png< /hintimg>
            < p font="14,#646464" spacing="1.5" val="'书籍简介:'+document.arguments.data.content"/>
        < /hint>
                    //在hint 控件里的属性设置点击事件，点击 后，图片对应于 显示状态图还是隐藏状态图


                </code>
            </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>

</div>
<!--子标签-->
<div id="childElement">
    <h2>子标签</h2>
    <div id="childElement_p">
        <h3> p </h3>
        <p>文字</p>
        <p>用法参见 <a href="../p/index.html">< p ></a></p>
    </div>
    <div id="childElement_img">
        <h3> img </h3>
        <p>图片</p>
        <p>用于多行文本，隐藏下面文字，点击图片又可以全部显示， 有二个属性，src ： 表示图片路径，index：表示展示最大行数</p>
    </div>
</div>
<div class="author">
    <p>by-姜进</p>
</div>
</body>
</html>